<template>

  <el-dialog title="订单报价" :visible.sync="dialogFormVisible" width="1120px">
    <el-form :model="formValue" label-width="120px" style="margin-top: 20px;">

      <el-row>
        <el-col style="width: 100%;">
          <el-form-item :label="$tt('客户信息')">

            <div style="display: flex;">
              <div>[{{ fmsOrder.customerCode }}] {{ fmsOrder.customerName }}</div>

              <div style="margin-left: 50px;">{{ $tt('产品信息') }}</div>
              <div style="margin-left: 10px;">[{{ fmsOrder.productCode }}] {{ fmsOrder.productName }}</div>
            </div>

          </el-form-item>
        </el-col>

      </el-row>

      <!-- 物流杂费-->
      <el-row>
        <el-col style="width: 80%;">
          <el-form-item :label="$tt('订单信息')">
            <el-descriptions direction="vertical" :column="5" border>
              <el-descriptions-item :label="$tt('订单类型-编号')">[{{ fmsOrder.refOrderType }}]
                {{ fmsOrder.refOrderNo }}
              </el-descriptions-item>
              <el-descriptions-item :label="$tt('实际重量')">{{ orderStatis.weight }} Kg</el-descriptions-item>
              <el-descriptions-item :label="$tt('体积')">{{ orderStatis.volume }} Cbm</el-descriptions-item>
              <el-descriptions-item :label="$tt('sku件数')">{{ orderStatis.skuNums }}</el-descriptions-item>
              <el-descriptions-item :label="$tt('箱数')">{{ orderStatis.packageNums }}</el-descriptions-item>
            </el-descriptions>

          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col style="width: 100%;">
          <el-form-item :label="$tt('label_pricing_unit')">
            <el-radio-group v-model="formValue.transportMainPrice.chargeType">
              <!-- 按计费重量 -->
              <el-radio-button label="CAL_WEIGHT">{{ $tt('PmsChargeTypeEnum__CAL_WEIGHT') }}</el-radio-button>
              <!-- 按实际重量 -->
              <el-radio-button label="WEIGHT">{{ $tt('PmsChargeTypeEnum__WEIGHT') }}</el-radio-button>
              <!-- 按体积 -->
              <el-radio-button label="VOLUME">{{ $tt('PmsChargeTypeEnum__VOLUME') }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="formValue.transportMainPrice.chargeType == 'CAL_WEIGHT'">
        <el-col style="width: 100%;">
          <el-form-item label="">
            <div class="price-cal-div-row">
              <!-- 计费重量 = Max（实际重量 KG , 体积  -->
              <div>{{ $tt('label_pms_cal_weight') }} = Max（{{ $tt('label_pms_real_weight') }} KG ,
                {{ $tt('label_volume') }} CBM * （ 100 * 100 * 100
              </div>
              <div>/</div>
              <div class="price-cal-col">
                <el-tooltip :content="$tt('label_pms_cal_weight_rate')" placement="top" effect="light">
                  <input type="text" v-model="formValue.transportMainPrice.calWeightRate" class="price-edit-inner-input"
                         style="width: 90px;"/>
                </el-tooltip>
              </div>
              <div> ））</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col style="width: 100%;">
          <!-- 计价模式 -->
          <el-form-item :label="$tt('label_pms_price_type')">
            <el-radio-group v-model="formValue.transportMainPrice.priceType" style="padding-left: 10px;">

              <!-- 单价 -->
              <el-radio label="SINGLE">{{ $tt('PmsTransportPriceTypeEnum__SINGLE') }}</el-radio>
              <!-- 续重-->
              <el-radio label="ADD" v-if="formValue.transportMainPrice.chargeType != 'VOLUME'">
                {{ $tt('PmsTransportPriceTypeEnum__ADD') }}
              </el-radio>

            </el-radio-group>

          </el-form-item>
        </el-col>
      </el-row>


      <!-- 物流费用配置-->
      <el-row>
        <el-col style="width: 100%;">
          <el-form-item :label="$tt('物流费用配置')">
            <!--          <ex_header_spiler :title="$tt('label_pms_transport_other_cfg')"></ex_header_spiler>-->
            <div style="display: flex; gap: 6px; ">
              <!-- 费用项名称 -->
              <div v-if="formValue.transportMainPrice.priceType=='ADD' " style="width: 160px;  text-align: center; ">
                {{ $tt('首重重量 Kg') }}
              </div>
              <!-- 计费方式 -->
              <div v-if="formValue.transportMainPrice.priceType=='ADD' " style="width: 160px;   text-align: center;  ">
                {{ $tt('首重价（元）') }}
              </div>
              <!-- 扣费节点 -->
              <div v-if="formValue.transportMainPrice.priceType=='ADD' " style="width: 160px;    text-align: center; ">
                {{ $tt('续重价 元/Kg') }}
              </div>
              <!-- 扣费币种 -->
              <div v-if="formValue.transportMainPrice.priceType=='SINGLE' "
                   style="width: 160px;    text-align: center; ">{{ $tt('单价') }} 元/{{
                  (formValue.transportMainPrice.chargeType == 'CAL_WEIGHT' || formValue.transportMainPrice.chargeType == 'WEIGHT') ? 'Kg' : 'CBM'
                }}
              </div>
              <!-- 计费金额 -->
              <div style="width: 160px; text-align: center; ">{{ $tt('扣费节点') }}</div>
              <!-- 扣费币种 -->
              <div style="width: 160px;    text-align: center; ">{{ $tt('label_pms_service_currency') }}</div>

            </div>

            <div style="display: flex; line-height: 42px;  gap: 6px;">

              <div v-if="formValue.transportMainPrice.priceType=='ADD' " style="width: 160px;   ">
                <el-input v-model="formValue.transportMainPrice.priceConfigs[0].pricePeriod[0].end" style="width: 100%;"
                          class="input-align-center"></el-input>
              </div>
              <div v-if="formValue.transportMainPrice.priceType=='ADD' " style="width: 160px;   ">
                <el-input v-model="formValue.transportMainPrice.priceConfigs[0].pricePeriod[0].price"
                          style="width: 100%;" class="input-align-center"></el-input>
              </div>
              <div v-if="formValue.transportMainPrice.priceType=='ADD' " style="width: 160px;   ">
                <el-input v-model="formValue.transportMainPrice.priceConfigs[0].pricePeriod[1].price"
                          style="width: 100%;" class="input-align-center"></el-input>
              </div>
              <div v-if="formValue.transportMainPrice.priceType=='SINGLE' " style="width: 160px;   ">
                <el-input v-model="formValue.transportMainPrice.priceConfigs[0].singlePrice" style="width: 100%;"
                          class="input-align-center"></el-input>
              </div>
              <div style="width: 160px;   ">
                <pms-price-point v-model="formValue.transportMainPrice.pricePoint" :productType="productType"
                                 style="width: 100%;"></pms-price-point>
              </div>

              <div style="width: 160px;   ">
                <fms-currency-choose v-model="formValue.transportMainPrice.currencyType" style="width: 100%;"
                                     disabled></fms-currency-choose>
              </div>

            </div>

          </el-form-item>
        </el-col>
      </el-row>

      <!-- 物流杂费-->
      <el-row>
        <el-col style="width: 100%;">
          <el-form-item :label="$tt('label_pms_transport_other_cfg')">
            <!--          <ex_header_spiler :title="$tt('label_pms_transport_other_cfg')"></ex_header_spiler>-->
            <div style="display: flex; gap: 6px; ">
              <!-- 费用项名称 -->
              <div style="width: 160px;  text-align: center; ">{{ $tt('label_pms_service_cost_name') }}</div>
              <!-- 计费方式 -->
              <div style="width: 160px;   text-align: center;  ">{{ $tt('label_pms_service_charge_type') }}</div>
              <!-- 扣费节点 -->
              <div style="width: 160px;    text-align: center; ">{{ $tt('label_pms_service_point') }}</div>
              <!-- 扣费币种 -->
              <div style="width: 160px;    text-align: center; ">{{ $tt('label_pms_service_currency') }}</div>
              <!-- 计费金额 -->
              <div style="width: 160px;    text-align: center; ">{{ $tt('label_pms_service_amount') }}</div>
              <div style="width: 90px;    text-align: center; ">
                <!--添加 -->
                <el-button size="medium"
                           @click="formValue.additionPrices.push({'costName': '', 'costType':'order', 'price': '0', 'currencyType': fmsOrder.currencyType  })">
                  {{ $tt('label_new') }}
                </el-button>
              </div>
            </div>

            <div style="display: flex; line-height: 42px; gap: 6px;"
                 v-for="item,additaonalIndex, in formValue.additionPrices">

              <div style="width: 160px;  gap: 6px;  ">
                <el-select v-model="item.serviceCode" :placeholder="$tt('tip_please_select')" style="width: 100%;"
                           clearable>
                  <el-option
                      v-for="item in serviceCostArr"
                      :key="item.serviceCode"
                      :label="item.serviceName"
                      :value="item.serviceCode">
                  </el-option>
                </el-select>
              </div>
              <div style="width: 160px;   ">
                <ex_super_input v-model="item.chargeType" type="select" enum="PmsChargeTypeEnum"></ex_super_input>
              </div>
              <div style="width: 160px;   ">
                <pms-price-point v-model="item.pricePoint" :productType="productType"></pms-price-point>
              </div>
              <div style="width: 160px;   ">
                <fms-currency-choose v-model="item.currencyType" style="width: 100%;" disabled></fms-currency-choose>
              </div>
              <div style="width: 160px;   ">
                <el-input v-model="item.price" style="width: 86px; " class="input-align-right"></el-input>&nbsp;{{
                  item.chargeType ? $tt('PmsPriceUnitEnum__' + chargeTypeMap[item.chargeType]) : ''
                }}&nbsp;
              </div>
              <div style="width: 90px;    text-align: center; color: #666; cursor: pointer; ">
                <!-- 删除 -->
                <ex-confirm-button :label="$tt('label_delete')"
                                   @afterOperationDone="formValue.additionPrices.splice(additaonalIndex, 1)"></ex-confirm-button>
              </div>
            </div>

          </el-form-item>
        </el-col>
      </el-row>


    </el-form>

    <div slot="footer" class="dialog-footer">

      <!--      &lt;!&ndash; position: absolute;   bottom: 26px;  &ndash;&gt;-->
      <!--      <div v-if="showCalResult" style="-->
      <!--          display: flex; width: 400px; height: 32px; line-height: 32px;-->
      <!--          border: 1px solid #de610a; color: #de610a; padding-right: 80px;-->
      <!--      ">-->
      <!--        <div style="width: 108px; text-align: right; ">预估费用</div>-->
      <!--        <div style="margin-left: 12px;">{{calResult}} {{fmsOrder.currencyType}}</div>-->
      <!--      </div>-->


      <!--  border: 1px solid #de610a;  -->
      <span v-if="showCalResult" style="
             height: 32px; line-height: 32px;
         color: #de610a; padding-right: 40px;
         font-weight: bold;
      ">
        <span style="width: 108px; text-align: right; height: 32px; line-height: 32px; ">预估费用</span>
        <span
            style="margin-left: 12px; height: 32px; line-height: 32px;">{{ calResult }} {{ fmsOrder.currencyType }}</span>
      </span>

      <el-button @click="tryCal()" style="margin-right: 20px;">试 算</el-button>

      <el-button @click="dialogFormVisible = false">取 消</el-button>

      <el-button type="primary" @click="submitPrice()">提交报价</el-button>

    </div>

  </el-dialog>

</template>


<script>

import FmsCurrencyChoose from '@/component/fms/fms-currency-choose.vue'

import PmsPricePoint from '@/component/pms/pms-price-point.vue'

export default {
  name: 'warehouse_select',

  components: {FmsCurrencyChoose, PmsPricePoint},

  data() {
    return {

      "dialogFormVisible": false,

      "formValue": {
        "transportMainPrice": {
          "chargeType": "WEIGHT",
          "priceType": "SINGLE",
          "calWeightRate": 6000,
          "priceConfigs": [
            {
              "areaId": "-1",
              "areaName": "-",
              "singlePrice": 0,
              "pricePeriod": [
                {
                  "start": 0,
                  "end": 10,
                  "price": 10
                },
                {
                  "start": 10,
                  "end": 2147483647,
                  "price": 0
                }]
            }],
          "pricePoint": "",
          "currencyType": ""
        },
        "additionPrices": []
      },

      "defaultForm": {
        "transportMainPrice": {
          "chargeType": "WEIGHT",
          "priceType": "SINGLE",
          "calWeightRate": 6000,
          "priceConfigs": [
            {
              "areaId": "-1",
              "areaName": "-",
              "singlePrice": 0,
              "pricePeriod": [
                {
                  "start": 0,
                  "end": 10,
                  "price": 10
                },
                {
                  "start": 10,
                  "end": 2147483647,
                  "price": 0
                }]
            }],
          "pricePoint": "",
          "currencyType": ""
        },
        "additionPrices": []
      },

      "fmsOrderId": '',

      "productType": '',

      "chargeTypeMap": {},

      "serviceCostArr": [],

      "fmsOrder": {},

      "orderStatis": {},


      "showCalResult": false,
      "calResult": '',

    }
  },

  watch: {
    // 'productType'(val, old) {
    // },

  },

  props: {},

  created() {

    let _this = this

    // 获取可选费用项
    _this.$ajax({
      url: '/fms-api/agent/AgentServiceCostRpc/selectEnable.json',
      success: (res) => {
        if (res && res.data && res.data.rows) {
          _this.serviceCostArr = res.data.rows
        }
      }
    });


    // 获取单位相关映射
    _this.$ajax({
      url: '/fms-api/product/PriceUnitRpc/getPriceUnitMap.json',
      success: (res) => {
        if (res && res.data) {
          _this.chargeTypeMap = res.data
        }
      }
    });

  },

  methods: {

    formatPrice() {
      this.formValue.transportMainPrice.priceConfigs[0].pricePeriod[1].start = this.formValue.transportMainPrice.priceConfigs[0].pricePeriod[0].end
      // 单价统一价
      if (this.formValue.transportMainPrice.priceType === 'SINGLE') {
        let tmp = this.formValue.transportMainPrice.priceConfigs[0].singlePrice

        this.formValue.transportMainPrice.priceConfigs[0].pricePeriod.forEach(e => {
          e.price = tmp
        })

      }
    },

    tryCal() {
      let _this = this

      _this.formatPrice()

      _this.$ajax({
        url: '/fms-api/customer/CustomerOrderRpc/tryCal.json',
        data: {
          priceJson: JSON.stringify(this.formValue),
          fmsOrderId: _this.fmsOrderId
        },
        success: (res) => {
          if (res) {
            _this.calResult = res.data
            _this.showCalResult = true
          }
        }
      });

    },

    submitPrice() {

      let _this = this

      _this.formatPrice()

      _this.$ajax({
        url: '/fms-api/customer/CustomerOrderRpc/submitPriceCfg.json',
        data: {
          priceJson: JSON.stringify(this.formValue),
          fmsOrderId: _this.fmsOrderId
        },
        success: (res) => {
          _this.$message({
            type: 'success',
            message: '提交成功'
          })
          _this.dialogFormVisible = false

          _this.$emit('afterSubmit')


        }
      });

    },

    showConfig(fmsOrderId) {

      let _this = this
      this.fmsOrderId = fmsOrderId

      _this.$ajax({
        url: '/fms-api/customer/CustomerOrderRpc/detail_order.json',
        data: {
          id: fmsOrderId
        },
        success: (res) => {
          if (res && res.data) {

            _this.fmsOrder = res.data
            _this.orderStatis = res.data.orderStatis
            _this.productType = _this.fmsOrder.productType

            if (_this.fmsOrder.transportMainPrice) {
              _this.formValue.transportMainPrice = _this.fmsOrder.transportMainPrice
              _this.formValue.additionPrices = _this.fmsOrder.additionPrices
            } else {
              _this.formValue = JSON.parse(JSON.stringify(_this.defaultForm))
            }
            _this.formValue.transportMainPrice.currencyType = _this.fmsOrder.currencyType

          }
          this.dialogFormVisible = true

        }
      });

    },

    getFormPriceLabel() {
      if (this.formValue.transportMainPrice.priceType == 'ADD') {
        return this.$tt('label_pms_add_price_cfg')
      }
      if (this.formValue.transportMainPrice.priceType == 'TOTAL') {
        return this.$tt('label_pms_total_price_cfg')
      }
      if (this.formValue.transportMainPrice.priceType == 'MULTI_ADD') {
        return this.$tt('首重+续重配置')
      }

      return ''
    },
    getChargeLabel() {
      if (this.formValue.transportMainPrice.chargeType == 'WEIGHT' || this.formValue.transportMainPrice.chargeType == 'CAL_WEIGHT') {
        return "重量"
      }
      if (this.formValue.transportMainPrice.chargeType == 'VOLUME') {
        return "体积"
      }
    },
    afterChange(val) {
      this.$emit('input', val)
    }

  }
}
</script>
<style>
.price-cal-div-row {
  display: flex;
}

.price-cal-div-row .price-cal-col {
  width: 120px;
  text-align: center;
}

.price-cal-div-row div {
  margin-right: 8px;
  text-align: center;
}

.price-edit-inner-input {
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
}

</style>
